<template>
  <div class="body-box" v-loading="load">
    <div class="sms-send-msg">注意: 为避免触犯国家相关法律法规以及电信运营商管理规定，请不要发送政治、反动、诈骗、广告或色情等信息</div>
    <div class="sms-send-set">
      <el-row :gutter="20">
        <el-col :span="8">
          <sms-mobile :send_content="send_content" :send_sign="send_sign"></sms-mobile>
        </el-col>
        <el-col :span="8">
          <el-form label-position="top" size="small">
            <el-form-item label="编辑短息内容">
              <el-input placeholder="请输入短信内容" type="textarea" v-model="send_content"></el-input>
            </el-form-item>
            <el-form-item label="计费规则">
              <div class="sms-pay-info">短信以实际发送为准，短信以实际发送为准，短信以实际发送为准，短信以实际发送为准，短信以实际发送为准，短信以实际发送为准，短信以实际发送为准，短信以实际发送为准，短信以实际发送为准，</div>
            </el-form-item>
            <el-form-item label="短信签名">
              <el-input placeholder="请输入短信签名" v-model="send_sign"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-form label-position="top" size="small">
            <el-form-item label="输入手机号（每行一个手机号，换行分割）">
              <el-input placeholder="每行一个手机号，换行分割" type="textarea" v-model="mobile_msg"></el-input>
              <div class="phone-num">共导入 <span>{{mobile_num}}</span> 个手机号</div>
              <el-button icon="el-icon-download" @click="dao()">导入手机号</el-button>
              <div class="dao-msg">
                <span>提醒：</span>
                <span>支持excel和txt文件导入，其中excel文件必须首列为手机号码</span>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="sms-btn-box">
        <el-button  size="small">测试发送</el-button>
        <el-button class="com-btn" size="small" @click="send()">确定发送</el-button>
      </div>
    </div>
    <!-- 导入手机号码模态框 -->
    <el-dialog :visible.sync="dao_model" title="导入手机号" width="600px" :append-to-body="true">
      <el-upload
        class="upload-demo"
        drag
        action="/admin/message/dao"
        :show-file-list="false"
        multiple
        :on-success="upSuccess"
        :on-error="upError"
        :on-progress="upProcess"
        
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传.xlsx或.xls表格文件，单次上传不得超过10000条</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import smsMobile from './mobile.vue';
export default {
  components:{ smsMobile },
  data(){
    return{
      send_content : '请输入要发送的短信内容',
      send_sign : '一块跑',
      mobile_msg : '',
      load : false,
      mobile_num : 0,
      dao_model : false
    }
  },
  methods:{
    //上传成功
    upSuccess(e) {
      if(e.code) {
        var str = this.mobile_msg ? this.mobile_msg+' \n ' : '';
        str += e.msg;
        this.mobile_msg = str;
        var arr = this.mobile_msg.split(/\s+/);
        this.mobile_num = arr.length;
        this.toast(1,'导入成功');
      }else {
        this.toast(0,'导入失败');
      }
      this.dao_model = false;
    },
    //上传失败
    upError(e) {
    },
    upProcess(e, file) {
    },
    //导入
    dao(){
      this.dao_model = true;
    },
    //发送短信
    send(){
      if(!this.send_content)return this.toast(0,'请输入要发送的内容');
      if(!this.send_sign)return this.toast(0,'请输入短信签名');
      if(!this.mobile_msg)return this.toast(0,'请输入要发送的手机号码');
      var arr = this.mobile_msg.split(/\s+/);
      for(var i in arr) {
        if(arr[i].length != 11)return this.toast(0,'第'+( parseInt(i)+1 )+'个手机号码位数不正确');
      }
      this.load = true;
      this.ajaxs('message/send',{
        data:{content : this.send_content , sign:this.send_sign , mobile:this.mobile_msg},
        success:(res) => {
          setTimeout(()=>{
            this.load = false;
            this.toast(res.code,res.msg);
          },1000);
        }
      });
    },
  },
  watch:{
    mobile_msg:{
      handler(v,o){
        var arr = this.mobile_msg.split(/\s+/);
        var temp_arr = [];
        for(var i in arr) {
          if(arr[i])temp_arr.push(arr[i]);
        }
        this.mobile_num = temp_arr.length;
      },
      deep : true
    }
  }
}
</script>

<style>
.sms-send-msg{color:#F56C6C}
.sms-send-set{
  margin-top: 40px;
}
.sms-pay-info,.dao-msg{line-height: 20px;font-size: 12px;color: #999;}
.dao-msg{
  margin-top: 20px;
}
.phone-num{
  margin:10px 0;
  font-size: 12px;
  color:#999;
}
.phone-num >span{
  color:#F56C6C;
}
.dao-msg > span:first-child{
  color: #000;
}
.sms-btn-box{
  text-align: right;
  margin-top: 20px;
}
</style>